<template>
  <div class="box">
    <table>
      <thead>
        <tr>
          <th>id</th>
          <th>名字</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in data" :key="item.id">
          <td>{{ index + 1 }}</td>
          <td>{{ item.title }}</td>
          <td>
            <slot :data="item" msg="拿到了id" name="caozuo"></slot>
          </td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="3">
            <div class="b-box">
              <span class="count">总数:1</span>
              <button class="clear">清空</button>
            </div>
          </td>
        </tr>
      </tfoot>
    </table>
  </div>
</template>
<script >
export default {
  data() {
    return {};
  },
  props: {
    data: Array,
  },
  components: {},
  created() {},
  mounted() {},
  methods: {},
};
</script>
<style lang='less' scoped>
.box {
  margin: 100px auto;
  width: 69%;
  table {
    width: 40%;
    border-collapse: collapse;
    th {
      padding: 15px;
      font-size: 20px;
      border: 1px solid rgb(251, 97, 83);
      width: 33.3%;
      color: #fff;
      background-color: #ffc941;
    }
    td {
      border: 1px solid #ccc;
      padding: 10px;
      text-align: center;
    }
    .b-box {
      padding: 0 20px;
      .clear {
        float: right;
        outline-style: none;
        border: none;
        background-color: #e86161;
        color: #fff;
        padding: 4px 10px;
        border-radius: 3px;
      }
      .count {
        float: left;
      }
    }
  }
}
</style>